<template>
	<div class="questionnaire">
		<a-card
			class="min-h-[68px] rounded my-[10px]"
			:body-style="{ padding: '0px 10px 10px 0px', minHeight: '1000px' }"
			:bordered="false"
		>
			<!-- 头部返回列表功能 -->
			<template #extra>
				<a-button class="border-none" icon="rollback" @click="rollback"
					>{{ $t('app.setting.themecolor.rr99') }}
				</a-button>
			</template>
			<!-- 正文头部 -->
			<div slot="title">
				<a-space>
					<div class="ty"></div>
					{{ $t('user.v159') }}
				</a-space>
			</div>
			<!-- 头部导航+查看RPA详情 -->
			<div style="margin: 30px 10px 0px 20px">
				<div style="display: flex; justify-content: space-between">
					<a-progress
						v-bind:width="400"
						stroke-linecap="square"
						:percent="questionnaireInfo.percent"
						:steps="questionnaireInfo.ModelTopicOver"
						style="margin-right: 10px; margin-bottom: 15px"
					/>
					<!-- 查看详情 -->
					<div style="margin-left: 20px; margin-top: -6px">
						<rpaDetail :rpaDetailId="id" :DpiaCommentsTypeStr="itemsRemark" />
					</div>
				</div>
			</div>
			<div class="card-box">
				<!--  左边章节+答题日志部分 -->
				<div class="card-left">
					<p class="left-title" v-show="finishStatus != 1">
						{{ $t('user.verification-code.required11156611043') }}
					</p>
					<div
						style="overflow: auto; height: 400px; margin-left: 10px"
						v-show="finishStatus != 1"
					>
						<a-tree
                            :show-icon="showIcon"
							select
							:tree-data="chapterLists"
							@select="treeSelect"
							:replaceFields="{
								children: 'children',
								title: 'title',
								key: 'value',
								state: 'state',
							}"
							:selectedKeys="checkedKeys"
							show-icon
                            :title="title"
						>
						</a-tree>
					</div>
					<!-- 退回日志 -->
					<div style="margin-top: 10px" v-if="itemsRemark.length">
						<p class="left-title">{{ $t('user.v126') }}</p>
						<div
							style="
								overflow: auto;
								height: 300px;
								margin: 10px;
								padding-top: 5px;
							"
						>
							<!-- 时间轴 -->
							<a-timeline>
								<a-timeline-item
									v-for="item in itemsRemark"
									:key="item.Id"
								>
									<div>
										{{
											item.DpiaCommentsDCO +
											item.DpiaCommentsCreatetime
										}}
									</div>
									<div>
										{{
											$t(
												'user.verification-code.required1115661105763'
											)
										}}：{{ item.DpiaCommentsTypeStr }}
									</div>
									<div>
										<span>{{
											$t(
												'user.verification-code.required111566181'
											)
										}}</span
										>{{
											item.DpiaCommentsInfo
												? item.DpiaCommentsInfo
												: '无'
										}}
									</div>
								</a-timeline-item>
							</a-timeline>
						</div>
					</div>
					<!-- 答题日志 -->
					<div style="margin-top: 10px">
						<p class="left-title">
							{{
								$t(
									'user.verification-code.required11156611057737144229'
								)
							}}
						</p>
						<div
							style="
								overflow: auto;
								height: 300px;
								margin: 10px;
								padding-top: 5px;
							"
						>
							<!-- 时间轴 -->
							<a-timeline>
								<a-timeline-item
									v-for="item in AnswerLogList"
									:key="item.Id"
								>
									<div>
										{{
											isLang
												? item.DpiaAnswerRecordAnswer
												: item.DpiaAnswerRecordAnswerEn
										}}
									</div>
								</a-timeline-item>
							</a-timeline>
						</div>
					</div>
				</div>
				<!-- 右边答题部分 -->
				<div class="card-right">
					<!-- 右边答题部分-->
					<div style="width: auto">
						<div v-if="finishStatus == 0">
							<div
								class="required"
								v-for="(item, index) in dpiaQuestionTopicAnswer"
								:key="index"
							>
								<!-- 右边第一个单选题 -->
								<div v-if="item.topic.type == 1">
									<readio
										ref="readio"
										:Info="item"
										@result="pageInit"
										:Answer="item.lastAnswer"
									/>
								</div>
								<!-- 右边第二个多选题 -->
								<div v-if="item.topic.type == 2">
									<checkbox
										ref="checkboxs"
										:Info="item"
										@result="pageInit"
										:Answer="item.lastAnswer"
									/>
								</div>
								<!-- 右边第三个富文本编辑器 -->
								<div v-if="item.topic.type == 3">
									<esitory
										ref="esitor"
										:Info="item"
										@result="pageInit"
										:Answer="item.lastAnswer"
									/>
								</div>
								<!-- 右边第四个特殊题 -->
								<div
									v-if="
										item.topic.type == 4 ||
										item.topic.type == 5
									"
								>
									<Other
										ref="other"
										:Info="item"
										@result="pageInit"
									></Other>
								</div>
								<div v-if="item.topic.type == 6">
									<p>{{ item.topic.title }}</p>
									<a-textarea
										v-model="rpaInfos.RpaPIALinkUrl"
										:auto-size="{ minRows: 3, maxRows: 7 }"
										style="width: 80%; margin: 15px 0"
										disabled
									/>
									<p style="color: #5077a5">
										Dear user, you do not need to answer the
										DPIA questionnaire since your data
										process activity has finished PIA
									</p>
									<p style="color: #5077a5">
										You can submit this request to DCO for
										approval, or go back to RPA to modify.
									</p>
								</div>
								<div v-if="item.topic.type == 7">
									<p>{{ item.topic.title }}</p>
									<!-- <p> Dear user, you do not need to answer the DPIA questionnaire since you have chosen No Personal Information or
                    Important Data Involved in your RPA. </p>
                  <p> You can submit this request to DCO for approval, or go back to RPA to modify. </p> -->
								</div>
							</div>
						</div>
					</div>

					<!-- 最后成功提交的结果 -->
					<div
						style="
							position: absolute;
							right: 0;
							padding: 30px;
							margin-right: 10%;
						"
						v-if="finishStatus == 1"
					>
						<img
							src="@/img/13.png"
							alt=""
							style="padding: 20px 190px 20px 100px"
						/>
						<p
							style="
								font-size: 20px;
								margin-left: -90px;
								text-align: center;
							"
						>
							{{
								$t('user.verification-code.required11156611044')
							}}
						</p>
						<!-- <p
            style="
              font-size: 14px;
              margin-left: -20px;
              white-space: normal;
              word-break: break-word;
              width: 450px;
              text-align: center;
              transform: translateX(-34px)
            "
          >
            {{ $t("user.verification-code.required11156611045") }}
          </p> -->
					</div>
				</div>
			</div>
			<!-- 下方按钮 -->
			<div
				:style="{
					position: 'fixed',
					right: 0,
					bottom: 0,
					width: '100%',
					borderTop: '1px solid #e9e9e9',
					padding: '20px 16px',
					background: '#fff',
					textAlign: 'center',
					zIndex: 1,
				}"
			>
				<!-- 上一题 -->
				<a-button
					@click="previousPage()"
					v-show="previousPageButtom && finishStatus != 1"
					style="margin-right: 20px"
					>{{ $t('user.verification-code.required11156611046') }}
				</a-button>
				<!-- 下一章 -->
				<a-button
					type="primary"
					@click="nextPage()"
					v-show="nextPageButtom"
					style="margin-right: 20px"
					>{{ $t('user.verification-code.required11156611047') }}
				</a-button>
				<!-- 交卷并提交DCO评估 -->
				<a-button
					type="primary"
					@click="showModal"
					v-show="dcoButtom"
					v-if="finishStatus != 1"
				>
					{{ $t('user.verification-code.required11156611048') }}
				</a-button>
				<!-- 查看 -->
				<a-button
					@click="review()"
					v-show="finishStatus == 1"
					style="margin-right: 20px"
					>{{ $t('user.verification-code.required1115661105718') }}
				</a-button>
				<a-modal
					v-model="visible"
					@ok="handleOk"
					:okText="
						$t('user.verification-code.required111566110577273')
					"
					:closable="false"
					width="400px"
					:cancel-text="$t('user.email.required11')"
					:confirmLoading="confirmLoading"
                    :title="$t('user.verification-code.required11156611049')"
				>
					<!-- {{ $t('user.verification-code.required11156611049') }}
					<br /><br /> -->
					<a-space
						>{{ $t('user.verification-code.required111566130') }}
						<a-select
							:placeholder="
								$t('user.verification-code.required111566130')
							"
							v-model="dco"
							show-search
							option-filter-prop="children"
							:filter-option="filterOption"
							style="width: 165px"
						>
							<a-select-option
								v-for="item in userList"
								:value="item.value"
								:key="item.value"
							>
								{{ item.label }}
							</a-select-option>
						</a-select>
					</a-space>
				</a-modal>
			</div>
		</a-card>
		<div class="big-box" v-if="ifLoading">
			<a-spin />
		</div>
	</div>
</template>

<script>
import {
	createAnswerLogList,
	dpiaQuestionAnswerCreate,
	dpiaQuestionChangeStatus,
	dpiaQuestionChapterAllLists,
	dpiaQuestionInfo,
	dpiaQuestionTopic,
	getAnswerLogList,
	getItemsRemark,
} from '@/api/dpia/form'
import Readio from '../../dataAssessment/dpia/onequestion/readio.vue'
import Checkbox from '../../dataAssessment/dpia/onequestion/checkbox.vue'
import Esitory from '../../dataAssessment/dpia/onequestion/esitory.vue'
import Four from '../../dataAssessment/dpia/onequestion/four.vue'
import RpaDetail from '../../dataAssessment/dpia/onequestion/components/rpaDetail.vue'
import { DcoQuery } from '@/api/common/form'
import { quesionFindRpaId, rpaDetail } from '@/api/rpa/form'
import Other from '../../dataAssessment/dpia/onequestion/other.vue'
import debounce from 'lodash.debounce'
export default {
	components: {
		Readio,
		Checkbox,
		Esitory,
		Four,
		RpaDetail,
		Other,
	},
	data() {
		return {
			dco: undefined,
			// DCO列表
			userList: [],
			// DCO按钮
			dcoButtom: false,

			// 上一页按钮控制
			previousPageButtom: true,

			// 下一页按钮控制
			nextPageButtom: true,

			current: '',
			value: '',
			visible: false,

			// 配置分页
			pagination: {
				page: 1,
				pageSize: 1000,
				total: 0,
			},

			// 左侧的章节列表
			chapterLists: [],

			// 基础答题信息
			questionnaireInfo: {},

			// 问题和答案数据
			dpiaQuestionTopicAnswer: {},

			// 问卷ID
			id: '',

			//章节ID
			chapterId: [],
			num: 0,

			// 当前题型
			topicType: 0,

			// 是否结束
			finishStatus: 0,

			// 已答题的结果
			dpiaQuestionUserLastAnswer: '',
			// 当前题目id
			currentChapter: '',
			// 退回的备注
			itemsRemark: [],
			//答题日志
			AnswerLogList: [],
			isLang: false,

			// 章节列表构建
			pageChapterLists: [],
			checkedKeys: [],
			// 防抖参数
			ifflag: false,
			confirmLoading: false,
			ifLoading: false,
			rpaInfos: {},
            showLine: true,
            showIcon: false,
			DpiaReturnId:0
		}
	},
	created() {
		this.init()
	},
	mounted() {
		let that = this
		window.addEventListener('setItemEvent', function (e) {
			if (e.key == 'lang') {
				let lang = JSON.parse(e.value)
				if (lang == 'zh-EN') {
					that.isLang = false
				} else {
					that.isLang = true
				}
			}
		})
	},
	methods: {
		async init() {
			try {
				let lang = localStorage.getItem('lang')
				if (lang === '"zh-CN"') {
					this.isLang = true
				}
				this.num = 0
				// 初始化题库
				const id = this.$route.query.id
				this.id = id
				const { data: rpaDetails } = await quesionFindRpaId({ Id: id })
				this.DpiaReturnId = rpaDetails.DpiaReturnId
				// 获取RPA详情
				const { data: rpaDetailInfo } = await rpaDetail({
					Id: rpaDetails.DpiaRpaId,
				})
				this.rpaInfos = rpaDetailInfo

				// 章节列表
				const { data: chapterLists } =
					await dpiaQuestionChapterAllLists({
						id: id,
					})

				// 可用章节
				for (let i = 0; i < chapterLists.length; i++) {
					if (chapterLists[i].topic) {
						this.pageChapterLists.push(chapterLists[i].id)
					}
				}

				this.checkedKeys = [this.pageChapterLists[0]]

				let arr = []
				let indexNum = 0
				//tree的数据
				chapterLists.forEach((item, i) => {
					// 1 代表本章节里有题
					if (item.topicType != 1) {
						arr.push({
							value: item.id,
							title: item.title,
							state: item.state,
							disabled: true,
						})
					} else {
						this.chapterId.push({
							chapterId: item.id,
						})

						if (item.state == 0 && this.DpiaReturnId !=0) {
							var items = {
								value: item.id,
								title: <span>{item.title}<span style="color: red;margin-left:8px">(New)</span></span>,
								state: item.state,
								index: indexNum,
								// selectable: false
							}
							arr.push(items)
							indexNum++
						} else if (item.state == 1&& this.DpiaReturnId !=0) {
							var items = {
								value: item.id,
								title: <span>{item.title}<span style="color: orangered;margin-left:8px">(Updated)</span></span>,
								state: item.state,
								index: indexNum,
							}
							arr.push(items)
							indexNum++
						} else if (item.state == 2&& this.DpiaReturnId !=0) {
							var items = {
								value: item.id,
								title: item.title,
								state: item.state,
								index: indexNum,
								// selectable: false
							}
							arr.push(items)
							indexNum++
						} else {
							var items = {
								value: item.id,
								title: item.title,
								state: item.state,
								index: indexNum,
								// selectable: false
							}
							arr.push(items)
							indexNum++
						}
					}
					let child = []
					if (item.topic) {
						item.topic.forEach((v) => {
							child.push({
								value: v.num,
								title: v.title,
								parentId: v.chapterId,
							})
						})
					}
					arr[i].children = child
				})

				this.chapterLists = arr
				// 基础信息查询
				const { data: questionnaireInfo } = await dpiaQuestionInfo({
					id: this.id,
				})

				// 如果已经答过题，就从答题完成那个地方开始
				if (
					questionnaireInfo.ModelTopicOver != 0 &&
					questionnaireInfo.ModelTopicOver !=
						questionnaireInfo.ModelTopicCount
				) {
					const { data: chapterLists } =
						await dpiaQuestionChapterAllLists({
							id: this.id,
						})
					//num为章节Id
					let num = null
					chapterLists.find((item) => {
						if (Array.isArray(item.topic)) {
							let res = item.topic.find((v) => {
								return v.answerState == 0
							})
							if (res) {
								num = res.chapterId
							}
							return res
						}
					})
					this.num = this.chapterId.findIndex(
						(item) => item.chapterId == num
					)
					this.checkedKeys = [this.pageChapterLists[this.num]]
					// this.topicShow();
				}

				// 退回备注
				const { data } = await getItemsRemark({ Id: this.id })
				if (data.length >= 1) {
					this.pagination.page = questionnaireInfo.ModelTopicCount
					this.itemsRemark = data
				}
				// 出题目
				await this.topicShow()
				//出答题日志
				await this.getAnswerLogList()
				// console.log("chapterLists:", this.chapterLists);
			} catch (error) {
				console.log('error:', error)
				if (this.isLang){
					// this.$message.error(error)
				} else{
					this.$message.error(error)
				}
			}
		},
		// 获取答题日志列表
		getAnswerLogList: debounce(async function () {
			this.AnswerLogList = []
			console.log(this.chapterId)
			console.log(this.num)

			const { data } = await getAnswerLogList({
				page: 1,
				pageSize: 10000,
				DpiaQid: this.id,
				ChapterId: this.chapterId[this.num].chapterId,
			})
			this.AnswerLogList = data.Lists
		}, 1000),
		//提交答案
		pageInit(obj) {
			obj === {} ? (this.ifLoading = true) : (this.ifLoading = false)
			this.ifflag = true
			this.dpiaQuestionUserAnswer = obj
			createAnswerLogList({
				TopicName: obj.title,
				DpiaQid: this.id,
				ChapterId: obj.chapter,
				Answer: obj.answerName,
				TopicId: obj.topic,
			})
			if (obj != {}) {
				// 把答题的结果拿到
				dpiaQuestionAnswerCreate({
					DpiaChapterId: obj.chapter,
					DpiaQid: this.id,
					DpiaChapterTopicId: obj.topic,
					DpiaChapterTopicAnswer:  encodeURIComponent(obj.AnswerQid),
					DpiaChapterTopicType: obj.type,
					DpiaChapterTopicRequired: encodeURIComponent(obj.textValue),
				})
				// 清空答案
				this.ifflag = false
			}
			setTimeout(async () => {
				await this.getAnswerLogList()
				await this.getQuestionnaireInfo()
			})
		},
		async topicShow() {
			this.dpiaQuestionTopicAnswer = []
			try {
				const { page } = this.pagination
				// 基础信息查询
				await this.getQuestionnaireInfo()
				// 答题信息
				// const { data } = await dpiaQuestionTopic({ id: this.id, page: page });
				const { data } = await dpiaQuestionTopic({
					id: this.id,
					page: 1,
					pageSize: 1000,
					chapterId: this.chapterId[this.num].chapterId,
				})
				const { Page, PageSize, Total, Lists } = data
				// 渲染题目
				if (Array.isArray(Lists)) {
					if (Lists.length > 0) {
						let arr = []
						Lists.forEach((item) => {
							// 2为多选||item.topic.type == 1单选
							if (item.topic.type == 2) {
								let required = []
								let num = null
								if (item.lastAnswer.required) {
									item.lastAnswer.required
										.split('%^#')
										.forEach((item) => {
											required.push(item.split(',!$'))
										})
								}
								if (required.length > 0) {
									item.answer.forEach((v) => {
										num = required.findIndex(
											(c) => c[0] == v.AnswerQid
										)
										if (num != null && num != -1) {
											v.required = required[num][1]
										} else {
											num = null
										}
									})
								}
								arr.push({
									answer: item.answer,
									lastAnswer: item.lastAnswer,
									topic: item.topic,
								})
							} else {
								arr.push(item)
							}
						})
						this.dpiaQuestionTopicAnswer = Lists
						// const topic = Lists[0].topic ?? {
						//   chapter: null,
						// };
						// this.currentChapter = topic.chapter;
					}

					// if (
					//   Object.keys(this.dpiaQuestionTopicAnswer).indexOf("lastAnswer") != -1
					// ) {
					//   this.dpiaQuestionUserLastAnswer =
					//     this.dpiaQuestionTopicAnswer.lastAnswer;
					// }

					// this.topicType = this.dpiaQuestionTopicAnswer.topic.type;
				}
				// 给分页数据赋值
				this.pagination = {
					page: 1,
					pageSize: 1000,
					total: Total,
				}
				// this.nextPageButtom = true;
				// // 判断出不出下一页
				if (this.num < this.chapterId.length - 1) {
					this.nextPageButtom = true
				} else {
					this.nextPageButtom = false
				}
				// 判断出不出上一页
				if (this.num == 0) {
					this.previousPageButtom = false
				} else {
					this.previousPageButtom = true
				}
				// 判断出不出提交DCO评估的按钮
				if (this.num == this.chapterId.length - 1) {
					this.dcoButtom = true
				} else {
					this.dcoButtom = false
				}
			} catch (error) {
				console.log('error:', error)
				this.$message.error(error)
			}
		},
		getQuestionnaireInfo: debounce(async function () {
			const { data: questionnaireInfo } = await dpiaQuestionInfo({
				id: this.id,
			})
            
			// 当前进度
			var thisProcess =
				(questionnaireInfo.ModelTopicOver /
					questionnaireInfo.ModelTopicCount) *
				100
			// 百分比
			questionnaireInfo.percent = parseFloat(thisProcess).toFixed(2)
			if (
				questionnaireInfo.ModelTopicOver == 0 &&
				questionnaireInfo.ModelTopicCount == 0
			) {
				questionnaireInfo.percent = 0
			}
			questionnaireInfo.percent = eval(questionnaireInfo.percent)

			this.questionnaireInfo = questionnaireInfo
			this.ifLoading = false
		}, 1000),
		// 上一页
		async previousPage() {
			this.finishStatus = 0
			// 总数不能为0，并且当前页码必须大于1
			// 否则隐藏按钮
			this.num--
			await this.topicShow()
			await this.getAnswerLogList()
			this.checkedKeys = [this.pageChapterLists[this.num]]
		},
		// 下一页
		async nextPage() {
			this.finishStatus = 0
			this.num++
			await this.topicShow()
			window.scrollTo(0, 0)
			await this.getAnswerLogList()
			this.checkedKeys = [this.pageChapterLists[this.num]]
		},
		async showModal() {
			const { data: chapterLists } = await dpiaQuestionChapterAllLists({
				id: this.id,
			})
			//num为未作答页数
			let num = null
			chapterLists.find((item) => {
				if (Array.isArray(item.topic)) {
					let res = item.topic.find((v) => {
						return v.answerState == 0
					})
					if (res) {
						num = res.chapterId
					}
					return res
				}
			})
			if (!num) {
				// 获取用户列表下拉
				const { data: userList } = await DcoQuery({
					ApprovalAlias: 'DCO',
				})
				console.log(userList)
				let arr = []
				userList.map((item, index) => {
					if (item.default == 1) {
						arr.push(item.value)
						return
					}
				})
				if (arr.length > 0) {
					console.log(arr[0])
					this.handleOkMr(arr[0])
				} else {
					this.visible = true
					this.userList = userList
				}
			} else {
				this.$message.error(
					this.$t(
						'user.verification-code.required111566110577371442281431666'
					)
				)
				this.num = this.chapterId.findIndex(
					(item) => item.chapterId == num
				)
				this.checkedKeys = [this.pageChapterLists[this.num]]
				this.topicShow()
			}
		},
		async handleOkMr(dco) {
			// 交卷
			try {
				this.confirmLoading = true
				await dpiaQuestionChangeStatus({
					Id: this.id,
					DpiaStatus: 2,
					DpiaDcoUserId: dco,
				})
				this.finishStatus = 1
				this.$message.success(
					this.$t('user.verification-code.required11156611045')
				)
			} catch (error) {
				let lang = localStorage.getItem('lang')
				if (lang === '"zh-EN"') {
					this.$message.error(
						'Failed to submit the paper, you cannot submit it to yourself'
					)
				} else {
					this.$message.error(error)
					console.log(error)
				}
			} finally {
				this.confirmLoading = false
			}
			await this.topicShow()
			this.visible = false
		},
		async handleOk(e) {
			// 交卷
			if (this.dco == undefined) {
				this.$message.error(
					this.$t('user.verification-code.required111566110577268')
				)
				return
			}

			try {
				this.confirmLoading = true
				await dpiaQuestionChangeStatus({
					Id: this.id,
					DpiaStatus: 2,
					DpiaDcoUserId: this.dco,
				})
				this.finishStatus = 1
				this.$message.success(
					this.$t('user.verification-code.required11156611045')
				)
			} catch (error) {
				let lang = localStorage.getItem('lang')
				if (lang === '"zh-EN"') {
					this.$message.error(
						'Failed to submit the paper, you cannot submit it to yourself'
					)
				} else {
					this.$message.error(error)
					console.log(error)
				}
			} finally {
				this.confirmLoading = false
			}
			await this.topicShow()
			this.visible = false
		},
		rollback() {
			this.$router.push({   path: '/dcoPortal/myTasks', })
		},
		review() {
			this.$router.push({
				path: '/dpia/onequestion/review',
				query: { id: this.id },
			})
		},
		filterOption(input, option) {
			return (
				option.componentOptions.children[0].text
					.toLowerCase()
					.indexOf(input.toLowerCase()) >= 0
			)
		},
		//点击树节点
		async treeSelect(a, e) {
			// console.log(a, e);
			if (a.length > 0) {
				if (a.length == 1) {
					this.num = this.chapterId.findIndex(
						(item) =>
							item.chapterId ==
							e.selectedNodes[0].data.props.value
					)
				} else {
					this.num = this.chapterId.findIndex(
						(item) =>
							item.chapterId ==
							e.selectedNodes[0].data.props.parentId
					)
				}
				// console.log(this.num);
				if (!this.chapterId[this.num]) return
				this.checkedKeys = a
				this.topicShow()
				await this.getAnswerLogList()
			}
		},
	},
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-body {
	// display: flex;

	.buttomm {
		width: 100%;
	}

	.card-box {
		width: 100%;
		// height: 100%;
		overflow: hidden;
		font-size: 15.5px;
		display: flex;
		overflow: auto;
		height: auto;
	}

	.card-left {
		/*rectangle copy 4备份 87*/
		color: #444e84;
		left: 309px;
		top: 287px;
		width: 358px;
		opacity: 0.67;
		border-radius: 2px;
		background: #f7faff;

		ul {
			margin-top: 10px;
		}

		ul li {
			padding: 3px;
		}
	}
	.card-right {
		// margin: 30px 30px 30px 350px;
		flex: 1;
		z-index: 1;
		width: auto;
		max-width: calc(100vw - 358px - 220px);
		margin: 0 0 20px 10px !important;
		.required .shu + span {
			&::after {
				content: '*';
				color: #f5222d;
				padding-left: 2px;
			}
		}
	}

	.card-left-review {
		margin: 0 30px 0 20px;
		color: #444e84;
		left: 339px;
		top: 287px;
		//width: 388px;
		height: 108px;
		opacity: 0.67;
		border-radius: 2px;
		background: #f7faff;
		margin-bottom: 30px;
	}

	.left-title {
		color: #050c34;
		width: 100%;
		line-height: 40px;
		padding: 0 10px;
		padding-left: 20px;
		background: #e7f0ff;
		border-bottom: 1px solid #ddd;
	}

	p {
		color: #000;
	}

	.active {
		color: blue;
		font-size: 18px;
	}
}

.ant-card {
	overflow: auto;
	height: auto;
}

::v-deep .ant-tree-title {
	display: inline-block;
	width: 300px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
::v-deep .ant-tree-child-tree .ant-tree-node-content-wrapper {
	background-color: transparent !important;
	cursor: default;
}
.big-box {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999999;
	display: flex;
	justify-content: center;
	align-items: center;
}
.api-sider2 {
	.api-method {
		font-size: 12px;
		padding-right: 10px;
	}
	.ant-tree {
		.ant-tree-node-content-wrapper {
			.ant-tree-iconEle {
				width: 48px;
			}
		}
	}
}
</style>
